import { type FilterMenuProps, ComponentType, type IResult } from 'vc/src/web';
import { getAreaConfig, getIndustryConfig, getTagTypeConfig } from '@/utils/filterConfig';
import { getPenaltyType, type EnvironmentCreditPenaltiesParams, getIllegalAction, getPollutionCategory } from '../apis';
import { SubjectType } from '@/apis';

export function useScreen(new_searchTxt) {
  if(new_searchTxt){
    new_searchTxt=new_searchTxt;
  }else{
    new_searchTxt='';
  }
  const queryData = reactive<EnvironmentCreditPenaltiesParams>({
    pageNum: 1,
    pageSize: 15,
    sortRule: 'noticeDate:desc',
    searchTxt: new_searchTxt,
    provinceCode: '',
    cityCode: '',
    countryCode: '',
    industryCategoryCodeLv1: '',
    industryCategoryCodeLv2: '',
    industryCategoryCodeLv3: '',
    penaltyResultCode: '',
    penaltyStartDate: '',
    penaltyEndDate: '',
    penaltyStartAmount: '',
    penaltyEndAmount: '',
    tagTypeCode: '',
    noticeStartDate: '',
    noticeEndDate: '',
    environmentPenaltyCode: '',
    environmentPreventionCode: ''
  });

  const penaltyTypes = getPenaltyTypes();

  const environmentViolations = getEnvironmentViolations();

  const menus = ref<Array<FilterMenuProps>>([
    {
      ...getAreaConfig().value,
      submitFn: (val: IResult) => {
        const { lv1, lv2, lv3 } = val;
        queryData.provinceCode = lv1.join();
        queryData.cityCode = lv2.join();
        queryData.countryCode = lv3.join();
      }
    },
    {
      ...getIndustryConfig().value,
      submitFn: (val: IResult) => {
        const { lv1, lv2, lv3 } = val;
        queryData.industryCategoryCodeLv1 = lv1.join();
        queryData.industryCategoryCodeLv2 = lv2.join();
        queryData.industryCategoryCodeLv3 = lv3.join();
      }
    },
    {
      ...getTagTypeConfig(SubjectType.PENALTY).value,
      submitFn: (val: string) => {
        queryData.tagTypeCode = val;
      }
    },
    {
      title: '处罚决定日',
      component: ComponentType.DATE,
      type: 'daterange',
      shortcuts: [7, 30, 180, 365],
      submitFn: (val: Array<string>) => {
        queryData.penaltyStartDate = val[0];
        queryData.penaltyEndDate = val[1];
      }
    },
    {
      title: '披露日期',
      component: ComponentType.DATE,
      type: 'daterange',
      shortcuts: [7, 30, 180, 365],
      submitFn: (val: Array<string>) => {
        queryData.noticeStartDate = val[0];
        queryData.noticeEndDate = val[1];
      }
    },
    {
      title: '处罚金额',
      component: ComponentType.SINGLE,
      customType: 'range',
      customUnit: '万',
      options: [
        { name: '<=50万', code: ',50' },
        { name: '50至100万', code: '50,100' },
        { name: '100万至500万', code: '100,500' },
        { name: '>500万', code: '500,' }
        // { name: '自定义', render:() => {return <div class="flex"><Input size="small" placeholder='请输入' /> - <Input size="small" placeholder='请输入' /> 万</div>;} }
      ],
      submitFn: (val: string) => {
        queryData.penaltyStartAmount = val ? val.split(',')[0] : '';
        queryData.penaltyEndAmount = val ? val.split(',')[1] : '';
      }
    },
    {
      ...getPollutionControlCategory(),
      submitFn: (val: string) => {
        queryData.environmentPreventionCode = val;
      }
    }
  ]);

  return {
    queryData,
    penaltyTypes,
    environmentViolations,
    menus
  };
}

function getPenaltyTypes() {
  const { data } = useRequest(getPenaltyType);
  const options = computed(() => data.value || []);

  return options;
}

function getEnvironmentViolations() {
  const { data } = useRequest(getIllegalAction);
  const options = computed(() => data.value || []);

  return options;
}

function getPollutionControlCategory() {
  const { data } = useRequest(getPollutionCategory);
  const options = computed(() => data.value || []);

  return {
    title: '环境污染防治类别',
    component: ComponentType.MULTIPLE,
    options,
    submitFn: (val) => {}
  };
}
